<template>
    <div class="programmer-detail">
        <el-card class="detail-card">
            <!-- 基本信息 -->
            <div class="basic-info">
                <div class="user-info">
                    <img src="@/assets/tx_5.jpg" class="avatar"/>
                    <div class="user-meta">
                        <h2>{{ programmer.title }}</h2>
                        <div class="rating">{{ programmer.rating }}</div>
                        <el-tag type="success">{{ programmer.experience }}</el-tag>
                    </div>
                </div>
            </div>

            <!-- 详细信息 -->
            <div class="detail-section">
                <h3>技能特长</h3>
                <div class="skills">
                    <el-tag 
                        v-for="skill in programmer.skills" 
                        :key="skill"
                        class="skill-tag"
                    >
                        {{ skill }}
                    </el-tag>
                </div>

                <h3>基本信息</h3>
                <div class="info-list">
                    <div class="info-item">
                        <span class="label">工作地点：</span>
                        <span>{{ programmer.location }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">可工作时间：</span>
                        <span>{{ programmer.availableTime }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">期望薪资：</span>
                        <span class="price">{{ programmer.price }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">联系方式：</span>
                        <span>********</span>
                    </div>
                </div>

                <h3>作品展示</h3>
                <div class="works">
                    <p>{{ programmer.works }}</p>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="action-buttons">
                <el-button type="primary" @click="showChat = true">
                    立即沟通
                </el-button>
                <el-button @click="goBack">返回列表</el-button>
            </div>
        </el-card>

        <!-- 添加聊天抽屉 -->
        <el-drawer
            v-model="showChat"
            title="与程序员沟通"
            size="400px"
            direction="rtl"
            :destroy-on-close="false"
            :modal="true"
        >
            <div class="chat-container">
                <div class="chat-messages" ref="messagesContainer">
                    <div v-for="(msg, index) in messages" :key="index" 
                         :class="['message', msg.role]">
                        <el-avatar 
                            v-if="msg.role === 'programmer'" 
                            src="@/assets/tx_5.jpg"
                            :size="40"
                        />
                        <el-avatar 
                            v-else 
                            :src="userAvatar"
                            :size="40"
                        />
                        <div class="message-content">
                            <div class="message-text">{{ msg.content }}</div>
                            <div class="message-time">{{ msg.time }}</div>
                        </div>
                    </div>
                </div>
                
                <div class="chat-input">
                    <el-input
                        v-model="inputMessage"
                        placeholder="输入消息..."
                        :disabled="loading"
                        @keyup.enter="sendMessage"
                    >
                        <template #append>
                            <el-button 
                                type="primary" 
                                :loading="loading"
                                @click="sendMessage"
                            >
                                发送
                            </el-button>
                        </template>
                    </el-input>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            programmer: {
                title: '广州伽佤电子商务有限公司MySQL开发工程师',
                rating: '⭐⭐⭐⭐⭐ (999)',
                experience: '10年',
                skills: ['PHP', 'MySQL', 'Vue', 'Python', 'Nginx'],
                works: '李撒林作品集合',
                location: '广州',
                availableTime: '工作日 9:30-18:30, 周末 9:30-18:30',
                price: '99999元/月'
            },
            showChat: false,
            messages: [],
            inputMessage: '',
            loading: false,
            userAvatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
        }
    },
    mounted() {
        // 初始化欢迎消息
        this.messages.push({
            role: 'programmer',
            content: '您好！请问有什么可以帮您的吗？',
            time: this.formatTime(new Date())
        })
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        async sendMessage() {
            if (!this.inputMessage.trim()) return
            
            const userMessage = this.inputMessage.trim()
            this.messages.push({
                role: 'user',
                content: userMessage,
                time: this.formatTime(new Date())
            })
            
            this.inputMessage = ''
            this.loading = true
            
            try {
                await new Promise(resolve => setTimeout(resolve, 500))
                
                // 模拟程序员回复
                this.messages.push({
                    role: 'programmer',
                    content: '收到您的消息，我会尽快回复您。',
                    time: this.formatTime(new Date())
                })
                
                this.$nextTick(() => {
                    const container = this.$refs.messagesContainer
                    container.scrollTop = container.scrollHeight
                })
            } catch (error) {
                ElMessage.error('发送消息失败，请重试')
            } finally {
                this.loading = false
            }
        },
        formatTime(date) {
            const hours = date.getHours().toString().padStart(2, '0')
            const minutes = date.getMinutes().toString().padStart(2, '0')
            return `${hours}:${minutes}`
        }
    }
}
</script>

<style scoped>
.programmer-detail {
    max-width: 1000px;
    margin: 30px auto;
    padding: 0 20px;
}

.detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
}

.basic-info {
    margin-bottom: 30px;
}

.user-info {
    display: flex;
    gap: 20px;
    align-items: center;
}

.user-meta {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-meta h2 {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.rating {
    color: #ff9900;
}

.detail-section {
    margin-top: 30px;
}

.detail-section h3 {
    color: #333;
    margin: 20px 0 15px;
    font-size: 18px;
}

.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.skill-tag {
    margin-right: 8px;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-item {
    display: flex;
    align-items: center;
}

.label {
    color: #666;
    width: 100px;
}

.price {
    color: #f56c6c;
    font-weight: bold;
}

.works {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

.action-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.message {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 12px;
}

.message.user {
    flex-direction: row-reverse;
}

.message-content {
    background: #f4f4f5;
    padding: 12px;
    border-radius: 8px;
    max-width: 70%;
}

.message.user .message-content {
    background: #ecf5ff;
}

.message-text {
    line-height: 1.5;
}

.message-time {
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.chat-input {
    padding: 20px;
    border-top: 1px solid #dcdfe6;
}
</style> 